<template>
	<!-- 登录 -->
	<view class="login h100 w100 flex-col" @touchmove.stop.prevent="() => {}">
		<view class="login-bg">
			<view class="txt">欢迎登录</view>
			<view class="txt1">煤矿三违管理系统</view>
		</view>
		<view class="login-form flex-grow-1">
			<uni-forms :modelValue="loginForm" :rules="rules" ref="Form">
				<uni-forms-item label="" name="username">
					<up-input
						v-model="loginForm.username"
						border="bottom"
						autoBlur
						clearable
						placeholder="请输入账号"
						prefixIcon="man-add"
						prefixIconStyle="font-size: 22px;color: #909399"
					></up-input>
				</uni-forms-item>
				<uni-forms-item name="password" label="">
					<up-input
						v-model="loginForm.password"
						border="bottom"
						password
						autoBlur
						clearable
						type="password"
						placeholder="请输入密码"
						prefixIcon="lock"
						prefixIconStyle="font-size: 22px;color: #909399"
					></up-input>
				</uni-forms-item>
			</uni-forms>
			<u-button @tap="login()" shape="circle" color="linear-gradient(83deg, #2172FC -2%, #21A8FC 99%)">登 录</u-button>
		</view>
	</view>
</template>
<script setup>
import { authLogin, getAuthority } from '@/api/public.js';
import { setAuthorization } from '@/router/auth.js';
import { encrypt } from '@/utils/jsencrypt.js';
import Com from '@/store/com.js';
import { reactive, ref } from 'vue';
import { useMainStore } from '@/store/index.js';

const mainStore = useMainStore();

let Form = ref(null);
// 登录参数
const loginForm = reactive({
	code: '',
	password: '',
	rememberMe: true,
	username: '',
	uuid: ''
});
// 校验规则
const rules = {
	username: {
		rules: [
			{
				required: true,
				errorMessage: '请输入姓名'
			}
		]
	},
	password: {
		rules: [
			{
				required: true,
				errorMessage: '请输入密码'
			}
		]
	}
};
// 登录逻辑
const login = () => {
	Form.value
		.validate()
		.then(async (res) => {
			try {
				const { code, data } = await authLogin({
					...loginForm,
					password: encrypt(loginForm.password)
				});
				if (code === 200 && data.tk) {
					setAuthorization('username', loginForm.username);
					setAuthorization('password', encrypt(loginForm.password));
					setAuthorization('accessToken', data.tk);
					uni.showToast({
						title: '登录成功',
						icon: 'success',
						success: async function () {
							uni.switchTab({
								url: '/pages/professional/index'
							});
							const userInfo = await Com().GETpersonInfo();
							setAuthorization('userInfo', userInfo);
						}
					});
					getAuthority().then((res) => {
						mainStore.mainList = res.data?.mainList;
						mainStore.riskOperations = res.data?.riskOperations;
					});
				} else {
					uni.switchTab({
						url: ''
					});
				}
			} catch (e) {
				uni.switchTab({
					url: ''
				});
				uni.showToast({
					content: e
				});
			}
		})
		.catch((err) => {});
};
</script>
<style scoped lang="scss">
.login-bg {
	background-image: url('/static/img/login/bg.png');
	background-size: 100% 90%;
	background-repeat: no-repeat;
	height: 575rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #fff;
	padding-left: 40rpx;

	.txt {
		font-weight: 500;
		font-size: 48rpx;
		margin-top: 20rpx;
	}

	.txt1 {
		font-weight: 500;
		font-size: 48rpx;
		margin-top: 20rpx;
	}
}

.login {
	&-form {
		background-image: url('/static/img/login/bg1.png');
		background-size: 100% 60%;
		background-repeat: no-repeat;
		background-position: bottom left;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0px 0px;
		background-color: #fff;
		margin-top: -90rpx;
		padding: 100rpx 60rpx 0;
		z-index: 1;
		position: relative;

		.u-input {
			box-shadow: 0px 0px 4px 0px #5b637433;
		}
	}
}
</style>
